<!--
  Generated template for the ApplicationPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button (click)="dismissCLI('')">
        <img src="assets/img/back.png" width='15' height='20'>
      </button>
    </ion-buttons>
    <ion-title>申请退款</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card class="first">
      <ion-item>
        <ion-avatar item-start>
          <img src="{{picrooturl}}{{orderInfo.shop_logo}}">
        </ion-avatar>
        <h2>   
          <span class="shopName">{{orderInfo.shop_name}}</span>
        </h2>
      </ion-item>
      <ion-grid>
        <ion-row class="goods">
          <ion-col col-4>
            <img src="{{picrooturl}}{{serviceInfo.imgs}}" class="goodPic">
          </ion-col>
          <ion-col col-5 class="mydetail">
            <h4 class="serviceName">{{serviceInfo.service_name}}</h4>
            <p class="orderCount">数量X{{orderInfo.order_count}}</p>
            <p class="marketPrice">￥{{serviceInfo.market_price}}</p>
            <!--<span>￥{{item.order_price}}</span>￥{{item.service_info.market_price}}</p>-->
          </ion-col>
          <ion-col col-3 class="price">
              <p class="service">服务</p>
              
              <p class="servicePrice">￥{{serviceInfo.service_price}}</p>
          </ion-col>
          <!--<ion-col col-4>
            <button ion-button  outline  *ngIf="item.order_status == 1">去支付</button>
            <button ion-button  outline  *ngIf="item.order_status == 4">确认收货</button>
            <button ion-button  outline  *ngIf="item.order_status == 6">去评价</button>
          </ion-col>-->
        </ion-row>
        <ion-row class="same">
          <ion-col col-3 id="left">
            退款金额
          </ion-col>
          <ion-col col-9 class="way">
            ￥{{serviceInfo.service_price}}
          </ion-col>
        </ion-row>
        <ion-row class="same">
          <ion-col col-3 id="left">
            退款方式
          </ion-col>
          <ion-col col-9 class="dot">
            原路返回<span class="way" style="margin-left:0.6rem;">(支持7个工作日内原路返回)</span>
          </ion-col>
        </ion-row>
      </ion-grid>
  </ion-card>
    <p class="refundReason">退款原因（选一项）</p>
    <ion-card *ngFor="let item of reasonList,let i=index">
      <ion-item class="reason" (tap)="choose(i)">
          <span item-start class="list">
            {{item.reason}}
          </span>
          <span item-end class="square">
            <img src="{{item.selectNo}}" alt="" class="kuang">
            <img src="{{item.selectOk}}" alt="" class="gou">
          </span>  
      </ion-item>
    </ion-card>
    <p class="refundReason">退款说明（可填可不填）</p>
    <ion-card class="last">
      <textarea [(ngModel)]="content" id="text" rows="6" placeholder="请在此输入，不超过200字" maxlength="200"></textarea>
    </ion-card>
    <!--底部按钮-->
    <button class="down" (tap)="apply()">
      申请退款
    </button>
</ion-content>
